<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
		<script src="js/mock.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/database.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/active-apply.css" />
	</head>
	<body>
		<div id="wrap">
			
		
		<div id="banner">
			<div id="idot" class="space-between"></div>
			<div id="back">
				<img src="img/small-back.svg">
			</div>
			<div id="more">
				<img src="img/small-more.svg">
			</div>
			<ul id="banner-box">
				<li></li>
				<li></li>
				<li></li>
			</ul>
		</div>
		<div id="message">
			<h2>重走洛克线，木里至稻城亚丁的穿越</h2>
			<img src="img/share.svg" id="share">
			<p>
				翻越垭口后，一路向下到央迈勇南坡下的新果牛场，全天徒步约7-8个小时，新果牛场海拔大约4200米。
			</p>
			<span>￥1599</span><del>￥1699</del>
		</div>
		<div id="moremes">
			<ul id="moreul" class="flex">
				<li>商品详情</li>
				<li>参数</li>
			</ul>
		</div>
		<div id="lastimg">
			<img src="./img/active-gg.jpg">
			<img src="img/first-img.jpg">
		</div>
		</div>
		<div id="btn">
			立即报名
		</div>
		
		<div id="adapply">
			<div id="applytext">
				<p>
					请如实填写报名信息，以便我们更好的为您服务。信息用于
					购买门票、保险等只用，不作他用，请放心填写。
				</p>
				<ul id="applyul">
					<li><span>*姓名：</span><input type="text" placeholder="输入内容"></li>
					<li><span>*手机：</span><input type="text" placeholder="输入内容"></li>
					<li><span>*身份证号：</span><input type="text" placeholder="输入内容"></li>
				</ul>
				<button id="applybtn">
					提交
				</button>
			</div>

		</div>
	</body>
	<script src="js/resultbank.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		function banner() {
			app.mockhot('/apply-banner', function(res) {
				var responseText = JSON.parse(res);
				var box = document.getElementById('banner-box');
				var li = box.getElementsByTagName('li');
				for (var i = 0; i < responseText.src.length; i++) {
					li[i].style.background = 'url(' + responseText.src[i] + ') no-repeat center center';
				}
			})
			app.banner('banner', 3000);
		}
		banner()

		function apply() {
			var apply = document.getElementById('adapply');
			var btn1 = document.getElementById('btn');
			var btn2 = document.getElementById('applybtn');
			var wrap = document.getElementById('wrap');

			wrap.addEventListener('touchend', function() {
				if (apply.style.bottom == 0 + 'px') {
					apply.style.bottom = -8.333333 + 'rem';
					btn1.style.bottom=0
				}
			})
			btn1.addEventListener('touchend', function() {
				apply.style.bottom = 0;
				btn1.style.bottom=-1.388888+'rem'
			})
		}
		apply()
	</script>
</html>
